I'm using availity-reactstrap-validation module with react library,

I have an AvField[type=date] which I get an timestamp from the API, and I want to parse the date into the AvField's value.

I have formatted the timestamp to this format: YYYY/MM/DD as below:

const scheduleDate = new Date(parseInt(candidateObject.scheduleDate));
scheduleDate: scheduleDate.getFullYear()+"-"+scheduleDate.getMonth()+"-"+scheduleDate.getDate()

And this is the AvField:

<AvField
    name="scheduleDate"
    type="date"
    placeholder=""
    value={innerCandidate.scheduleDate}
    onChange={(e) => {
       setInnerCandidate({
       ...innerCandidate,
       scheduleDate: e.target.value
      })
    }}
 />

for some reason the field remain with his placeholder, but holding the new date in the value.

here is the whole code that receive and update the data:

const CandidateForm = ({candidateObject = {}, history, handleSubmitForm}) => {
    const [innerCandidate, setInnerCandidate] = useState({})
    const [departmentList, setDepartmentList] = useState([])
    const [userPermission, setUserPermission] = useState(0)
    useEffect(() => {
        setUserPermission(localStorage.getItem("permission"));
        if (Object.keys(candidateObject).length > 0) // if exists update the state. //UPDATE COMPONENT
        {
            const scheduleDate = new Date(parseInt(candidateObject.scheduleDate));
            const modifyiedCandidateObject = {
                ...candidateObject,
                scheduleDate: scheduleDate.getFullYear()+"-"+scheduleDate.getMonth()+"-"+scheduleDate.getDate()
            }
            setInnerCandidate(modifyiedCandidateObject)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [candidateObject.id])

    return ()
}